一、Mix 基本

• 以 webpack 為基礎的組件系統, 將互相依賴的模組, 編譯成靜態資源
• Laravel 5.3 以前主要使用 Gulp 組件工具, 5.4 以後以 webpack 為主
• 常處理的前端
  • 預處理項目, 如: Sass, Less, PostCSS
  • 複製檔案或檔案夾到 public 部署上線
  • 串接 js, 最小化 js
  • 打包後匯出到 public/css, public/js 目錄下, 提供框架引入資源檔
• 設定位置在根目錄 webpack.mix.js
• 安裝環境
  • 安裝 Node.js, 可至官網下載安裝
  • 開啟命令提視窗, 切換到專案目錄下, 輸入 「npm install」 安裝, Laravel 有預設建立 Mix 環境的 package.json 檔
  • 運行環境

      # 執行 webpack Mix, 會進行一次打包檔案到 public 目錄
      npm run dev 
  
      # 會監察檔案是否有異動, 有更改檔案後會立即執行打包
      npm run watch
  
      # 打包檔案並壓縮內容產生 min 檔
      npm run prod
  

二、語法

• 預處理程式

    let mix = require('laravel-mix')
    
    // 預處理 sass 檔案
    // 將 app.scss 處理後匯出到 public/css 下
    // 第一個參數為要處理的檔案, 第二個參數為要匯出的位置
    mix.sass('resource/sass/app.scss', 'public/css')
    
    // 預處理 js 檔案
    mix.js('resource/js/app.js', 'public/js')
    
    // 處理 vue
    // mix 預設可以處理 vue, 只需要在使用 js() 方法後接 vue() 方法
    mix.js('resource/js/app.js', 'public/js').vue()
    
    // 處理 react
    mix.react('resources/js/app.js', 'public/js')

• 無須預處理程式(一般css, js 串接)

    // 結合 css 目錄下的所有檔案
    mix.styles('resources/css', 'public/css/all.css')
    
    // 結合 css 目錄下指定檔案
    mix.styles([
        'resources/css/normalize.css',
        'resources/css/sidebar.css'
    ], 'public/css/custom.css')
    
    // 結合 js 下的所有檔案
    mix.scripts('resoucrce/js', 'public/js/all.js')

• sourceMaps()
  • 添加在最後面會產生 {檔案名稱}.map 檔, 可在瀏覽器開發工具查看內容的來源

      mix.js('resource/js/app.js', 'public/js').sourceMaps()
  

三、版本控管

• 在 mix() 後面添加 version() 方法

    mix.sass('resources/sass/app.scss', 'public/css').version()

• 每當執行組建腳本時會產生雜湊碼形成唯一值

    // 在 mix-manifest.json 裡面會記錄產生的結果與對應的連結
    {
        "/js/app.js": "/js/app.js?id=6c9398f84a8b8b004c2c3a3a106c5b9f",
        "/css/app.css": "/css/app.css?id=b429dea1197d2eac455a45bf34f62d32"
    }

• 在 html 裡面使用

    <!-- 會比對 mix-manifest.json 檔案內容進行轉換 -->
    <link rel="stylesheet" href="{{ mix("css/app.css") }}">

Hot Module Replacement

• Vue 或 React 在使用路由產生 SPA 服務時, 有時測試人員在經過幾個步驟後, 需要更新代碼, 此時可以利用 Hot Module Replacement ( HRM ), 在不動到頁面上的操作流程更新代碼
• HRM 熱模組替換、熱重載, 當其運作時要求 Browsersync 遇到重新編譯時, 只重載有更動的檔案, 不會影響操作頁面上已有的內容
• 使用時須下 cmd 指令 npm run hot, Mix 會在 localhost:8080 開啟小型 Node.js 伺服器
• 因為是在 port 8080 上啟動 HRM, 因此 <script> 網址需指向 8080 port, 此時可以利用 mix() 方法引入 js 檔案, 會自動添加 8080 port